<template>
	<div class='home-child'>
		<TopNav
			:showTitle="false"
			showInform
			showBack
			color="#00493E"
			msgColor="#01937C"
			backColor="#01937C"
			bgColor="#fff"
		/>
		<div class="left">
			<div
				class="types"
				v-for="item in types"
				:key="item.key"
			>
				<div class="label">{{item.label}}</div>
				<div class="pickers">
					<div
						class="tag"
						v-for="tag in item.tags"
						:key="tag.id"
					>
						<Button
							width="100"
							height="100"
							:bgColor="activeType(item.key,tag) ? '#00C9A9' :' #EFF3F3'"
							:color="activeType(item.key,tag) ? '#FFFFFF' :' #00493E'"
							@click="onclickTag(item, tag)"
						>
							<img
								style="width: 80px; height: 80px;"
								:src="tag.img"
							>
						</Button>
						<div class="name">
							{{tag.name}}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="title">改造教程</div>
			<div class="course">
				<CourseList
					size="300"
					column="3"
					:filterTag="[selectToy,selectInterest]"
				/>
			</div>
		</div>
	</div>
</template>

<script>
import Toys from '@/mock/toys'
import Interest from '@/mock/interest'

export default {
  data() {
    return {
      types: [
        { label: '玩具类别', tags: Toys, key: 'selectToy' },
        { label: '改造方向', tags: Interest, key: 'selectInterest' },
      ],
      selectToy: 0,
      selectInterest: 0,
    }
  },
  computed: {
    activeType() {
      return function(key, tag) {
        return this[ key ] === tag.id
      }
    }
  },
  methods: {
    onclickTag(type, tag) {
      const val = this[ type.key ]

      if (val === tag.id) {
        this[ type.key ] = 0
      } else {
        this[ type.key ] = tag.id
      }
      console.log(this.selectToy, this.selectInterest)
    }
  }
}
</script>

<style lang='scss' scoped>
.home-child {
  display: flex;
  height: 100vh;
  padding-top: 90px;
  background-color: #ffffff;

  .left {
    padding: 0 54px 0 46px;
    font-size: $sMini;
    color: $color1;
    border-right: 2px solid rgba(0, 62, 52, 0.08);

    .types {
      margin-bottom: 24px;

      .label {
        margin-bottom: 12px;
        color: rgba(0, 73, 62, 0.5);
      }

      .pickers {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 12px 26px;
        text-align: center;

        .name {
          margin-top: 6px;
          color: rgba(0, 73, 62, 0.7);
        }

        img {
          object-fit: contain;
        }
      }
    }
  }

  .right {
    flex: 1;
    padding: 0 80px 40px 72px;
    overflow-x: hidden;
    overflow-y: auto;

    .title {
      margin-bottom: 32px;
      font-size: 28px;
      color: $color1;
    }
  }
}
</style>
